{extend name="other/public"}
<link rel="stylesheet" href="/static/plug_in/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
{block name='css'}
<link href="/static/wx/css/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/static/wx/css/site.css" rel="stylesheet" type="text/css" />
<link href="/static/wx/css/wwei_editor.css?2023" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/static/wx/css/jquery.jgrowl.css" />
<style>
  .c20{width: 370px;margin-right: 10px;height: 100%;}
  .c20 img{max-width: 100%;}
  .c21{flex:1;height: 100%;}
  .c22{height: 72vh;}
  .nav-tabs > li > a, .nav-pills > li > a {margin-right: 0;}
  .nav-tabs > li {width: 20%;text-align: center;}
  .an-style1{height: 100%;}
  .template-content{height: 100%;}
    .layui-form-item{position: relative;}
    .layui-form-label{width: 90px;}
    .layui-input-block{margin-left: 120px;}
  .layui-layout-admin .layui-footer{z-index: 999;}
  .layui-card{border:1px solid #eee;}
  .layui-tab-card{box-shadow: none;border:0;}
  .c1{position: relative;padding-bottom: 5px!important;}
  .c1 .layui-btn-group{margin-top: 5px;}
  .c2.layui-input-inline{width: 330px;position: relative;z-index: 2;}
  .c3{position: absolute;left:560px;top:-50px;width: 150px;height: 150px;}
  .c3 .c4:hover div{display: block;cursor: pointer;}
  .c3 .c4 div{display: none;transition: .2s;position: absolute;left:0;top: 0;background: rgba(0,0,0,.5);width: 100%;height: 100%;text-align: center;line-height: 160px;}
  .c3 .layui-icon{font-size: 30px;color: #fff;}
  .c4{
    flex: none;
            text-align: center;
            vertical-align: middle;
            transition: .2s;
            border:1px solid #f9f9f9;
            background-color: #eee;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;
  }        .c4::before,.c4::after{
            content: "";
    display: inline-block;
    padding-bottom: 100%;
    width: .1px;
    vertical-align: middle;
        }
        .c5{padding-left: 120px;margin-top: 10px;}
        .c6 .c4{margin-right: 8px;width: 100%;position: relative;}
        .c6 .c4:hover div{display: block;cursor: pointer;}
        .c6 .c4 div{display: none;transition: .2s;position: absolute;left:0;top: 0;background: rgba(0,0,0,.5);width: 100%;height: 100%;text-align: center;line-height: 100px;}
        .c6 .layui-icon{font-size: 30px;color: #fff;}
        .c8{width: 100px;margin-right: 10px;}
        .c9{margin-top: 10px;}
        .c9 .layui-input{height: 30px;}
        
</style>
{/block}
{block name='content'}
<div class="layui-fluid">
  <div class="layui-card">
    <form class="layui-form" action="" lay-filter="anForm">
      <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
          <li class="layui-this">基本信息</li>
          <li>页面内容编辑</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">菜单归属</label>
                      <div class="layui-input-inline c2" style="z-index: 3;">
                          <select name="pid">
                            <option value="0">{if $id == '0'}新增顶级菜单{else /}顶级菜单{/if}</option>
                            {volist name="pageList" id="vo"}
                              {eq name="vo['pid']" value="0"}
                              <option value="{$vo['id']}" >|—— {$vo['cn_name']}</option>
                              {/eq}
                            {/volist}
                          </select>
                      </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                      <input type="text" name="cn_name" placeholder="输入菜单名称" class="layui-input" value="{$pageData['cn_name']}">
                    </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">菜单英文名称</label>
                  <div class="layui-input-block"> 
                    <input type="text" name="en_name" placeholder="请输入" class="layui-input" value="{$pageData['en_name']}">
                  </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单链接</label>
                    <div class="layui-input-block">
                      <input type="text" name="url" placeholder="输入菜单连接" class="layui-input" value="{$pageData['url']}">
                    </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">页面标题</label>
                  <div class="layui-input-block">
                    <input type="hidden" value="{$id}" name="id">
                    <input type="text" name="title"  placeholder="title，就是浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到" class="layui-input" value="{$pageData['title']}">
                  </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">页面小标题</label>
                    <div class="layui-input-block">
                      <input type="text" name="min_title"  placeholder="请输入" class="layui-input" value="{$pageData['min_title']}">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">SEO 关键词</label>
                  <div class="layui-input-block">
                    <input type="text" name="keywords" autocomplete="off" value="{$pageData['keywords']}" placeholder="作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此keywords的每个词都要能在内容中找到相应匹配，才有利于排名，如：关键词1,关键词2,关键词3,关键词4" class="layui-input">
                  </div>
                </div> 
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">SEO 内容摘要</label>
                  <div class="layui-input-block">
                    <textarea name="description" placeholder="网页的简要内容概况，一般不超过150个字符，描述内容要和页面内容相关" class="layui-textarea">{$pageData['description']}</textarea>
                  </div>
                </div> 
                <div class="layui-form-item">
                  <label class="layui-form-label">其他内容</label>
                  <div class="layui-input-block">
                      <textarea name="other" placeholder="请输入" class="layui-textarea">{$pageData['other']}</textarea>
                  </div>
                </div> 
                <div class="layui-form-item">
                  <label class="layui-form-label">排序</label>
                  <div class="layui-input-inline c2">
                    <input type="text" name="sort" placeholder="数字越大越靠前" class="layui-input" value="{$pageData['sort']}">
                  </div>
                </div>
            </div>
          </div>
 
          <div class="layui-tab-item">
            <div class="u-flex c22">
              <div class="c20">
                  <div class="an-style1">
                      <ul class="nav nav-tabs" id="templateTab">
                          <li class="active"><a href="#temp-tpl" data-type="tpl">模板</a></li>
                          <li><a href="#temp-text" data-type="text">正文</a></li>
                          <li><a href="#temp-title" data-type="title">标题</a></li>
                          <li><a href="#temp-img" data-type="img">图片</a></li>
                          <li><a href="#temp-follow" data-type="follow">吸粉</a></li>
                      </ul>
                      <div class="tab-content template-content">
                          <div id="template-loading" class="hide"><img src="/static/wx/images/loading.gif"> 加载中...</div>    
                          <div class="tab-pane active" id="temp-tpl"></div>
                          <div class="tab-pane" id="temp-text"></div>
                          <div class="tab-pane" id="temp-title"></div>
                          <div class="tab-pane" id="temp-img"></div>
                          <div class="tab-pane" id="temp-follow"></div>
                      </div>
                  </div>
              </div>
              <div class="c21" id="wxcontent">
                <fieldset>
                  <script id="wwei_editor" type="text/plain" style="width:100%;height:67.3vh;">
                    {$pageData['content']|raw}
                  </script>
                </fieldset>
              </div>
          </div>
            <!-- <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">内容详情</label>
              <div class="layui-input-block">
                <script id="editor" type="text/plain" style="width: 100%;height: 300px;" name="content">{$pageData['content']|raw}</script>
              </div>
            </div>  -->
          </div>

        </div>
      </div>
      <div class="layui-form-item layui-layout-admin">
        <div class="layui-input-block">
          <div class="layui-footer" style="left: 0;">
            <button type="button" class="layui-btn layui-btn-primary" onclick="closeTabPage()">退出编辑，返回列表</button>
            <button type="button" class="layui-btn" lay-submit="" lay-filter="component-form-demo1">保存修改</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
{/block}

{block name='js'}


<script type="text/javascript" src="/static/plug_in/clipboard.min.js"></script>
<script type="text/javascript" src="/static/wx/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/wx/js/jquery.jgrowl.min.js"></script>
<script type="text/javascript" src="/static/wx/wxeditor/js/less.js"></script>
<script type="text/javascript" src="/static/wx/wxeditor/js/ueditor1_4_3/ueditor.config.js"></script>
<script type="text/javascript" src="/static/wx/wxeditor/js/ueditor1_4_3/ueditor.all.min.js"></script>
<script type="text/javascript" src="/static/wx/wxeditor/js/ueditor1_4_3/third-party/zeroclipboard/ZeroClipboard.min.js"></script>
<script type="text/javascript" src="/static/wx/wxeditor/js/wwei_editor.js"></script>
<script type="text/javascript">


    var less_parser = new less.Parser;
    ZeroClipboard.config({ swfPath: "/static/wx/wxeditor/js/ueditor1_4_3/third-party/zeroclipboard/ZeroClipboard.swf" });

    var wwei_editor = UE.getEditor('wwei_editor');
    //加载本地缓存

    wwei_editor.ready(function () {
        var editor_document = wwei_editor.selection.document;
        if (window.localStorage) {
            if (typeof window.localStorage._wweiContent != "undefined") {
                wwei_editor.setContent();
            }
            setInterval(function () {
                window.localStorage._wweiContent = wwei_editor.getContent();
            }, 2000);
        }
    });

    $(function () {
        /*模板Tab */
        var dataType = 'tpl';

        function _loadtemp(dataType) {
            $("#template-loading").show();
            $.ajax({
                type: "POST",
                url: "{:url('other/loadtemp')}",
                data: { "type": dataType },
                success: function (data) {
                    $("#template-loading").hide();
                    var tabPane = $("#temp-" + dataType);
                    tabPane.html(data);
                    var _tempLi = tabPane.find(".template-list li");
                    _tempLi.hover(function () {
                        $(this).css({ "background-color": "#f5f5f5" });
                    }, function () {
                        $(this).css({ "background-color": "#fff" });
                    });
                    _tempLi.click(function () {
                        if (dataType == "tpl") {
                            var _tempHtml = $(this).find('.tpl-code').html();
                            wwei_editor.setContent("");
                            wwei_editor.execCommand("insertHtml", _tempHtml);
                        } else {
                            var _tempHtml = $(this).html();
                            insertHtml(_tempHtml + "<p><br/></p>");
                        }
                    });
                }
            });
        }
        _loadtemp(dataType);//加载
        //TAB切换
        $("#templateTab a").click(function (e) {
            e.preventDefault();
            $(this).tab("show");

            dataType = $(this).attr("data-type");
            if (dataType) {
                var tabPane = $("#temp-" + dataType);
                if (tabPane.find(".template-list").length <= 0) {
                    _loadtemp(dataType);
                }
            }
        });


        //清空
        $("#clear-editor").click(function () {
            layer.confirm('确定清空', {
                btn: ['确定', '取消'], //按钮
                title: '系统提示',//标题
                closeBtn: 0,//不显示关闭按钮
            }, function () {
                parent.layer.closeAll();
                wwei_editor.setContent("");
            });
            // if (confirm("是否确认清空内容，清空后内容将无法恢复")) {
            //     wwei_editor.setContent("");
            // }
        });





        $(".anan-but").click(function () {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['640px', '90%'],
                shadeClose: true,
                skin: 'an-view',
                content: getEditorHtml()
            });
        })

        $(".post-but").click(function () {
            layer.msg('开发中');
        })


        //定制效果
        $("#is_show_title").click(function () {
            var cked = $(this).attr("checked");
            if (cked == undefined) {
                $("#wx_show_title").hide();

            } else {
                $("#wx_show_title").show();
            }
        });
        $("#is_show_statis").click(function () {
            var cked = $(this).attr("checked");
            if (cked == undefined) {
                $("#wxpreview .wxfoot").hide();

            } else {
                $("#wxpreview .wxfoot").show();
            }
        });
    });
</script>
<script>
    function closeTabPage(){
        // parent.layui.admin.events.closeThisTabs();//关闭当前标签页
        location.href="{:url('page/list_data')}"
    }

  layui.config({
    base: '../../../static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'upload'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,upload = layui.upload
    ,element = layui.element
    ,layer = layui.layer
    ,laydate = layui.laydate
    ,form = layui.form;

    tipsBox('1930*287')

    //表单初始化赋值
    form.val("anForm", {
      "pid":"{$pageData['pid']}",
      "type":"{$pageData['type']}",
      "is_show":"{$pageData['is_show']}",

    });

    $(".choice-img").click(function(){
      layer.open({
          type: 2,
          title: '选择图片',
          content: "{:url('other/img_list')}?class="+'choice-img-input&num=1',
          area: ['960px', '70%'],
          shadeClose:true
        }); 
    })
    
    $(".choice-img-all").click(function(){
      layer.open({
          type: 2,
          title: '选择图片',
          content: "{:url('other/img_list')}?class="+'c6&num=2',
          area: ['960px', '70%'],
          shadeClose:true,
          end:function(){
            $("input[name*='imgs']").each(function(){
                $(this).attr('name','banner[]')
            })
          }
        }); 
    })
    $(".c6 ").on('click','.c4',function(){
      $(this).remove()
    })

    $(".c3 .c4").on('click',function(){
      $(this).attr('style','')
      $(".choice-img-input").val('')
    })



    /* 监听提交 */
    form.on('submit(component-form-demo1)', function(data){
      delete data.field.file;
      delete data.field.editorValue;
      if(Number(data.field.id)==0){
        delete data.field.id;
      }

      data.field.content = getEditorHtml();
      $.post("{:url('form_data')}",data.field,(res)=>{

        if(res.code == 1){
          layer.msg('操作成功，即将返回列表',{time: 1000},function(){
              location.href="{:url('page/list_data')}"
              // parent.layui.admin.events.closeThisTabs();//关闭当前标签页
          })
        }else{
          layer.msg(res.msg)
        }
        
      })

      return false;
    });
  });



  </script>
{/block}
